<template>
<div class="marketBox">
    <ul class="listinfo">
       <li v-for="(item, index) in getCnTrading" :key="index"><span :class="'price'+index">{{item}}</span></li>
    </ul>
    <ul class="marketBox-ul" v-for="(item, index) in marketData" :key="index">
            <li class="symbols"><p>{{item.symbol}}</p></li>
            <li class="info"><span>价格({{item.from}})</span><span class="count">数量({{item.to}})</span></li>
            <li v-for="(list_m, index2) in item.list" :key="index2"><span class="price">{{list_m[0]}}</span><span class="count">{{list_m[1]}}</span></li>
    </ul>
</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'MarketDepthBox',
  props: ['marketData'],
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters({
      getCnTrading: 'GetCnTrading'
    })
  }
}
</script>

<style>
.marketBox .marketBox-ul,.marketBox .listinfo{
 width:180px;
 float:left;
 border-right:1px solid #dbdbdb;
 padding:0px 30px 0px 0px;
 margin:5px 25px 5px 0px;
}
.marketBox ul:last-child
{
 border-right:none;
}
.marketBox .listinfo{
    width: 60px;float: left;padding:65px 0px 0px 0px;margin:5px 0px 0px 0px;border-right:none;
}
.marketBox li {
    list-style:none;
    display:flex;
    width:100%;
}
.marketBox-ul li:nth-child(7),.listinfo li:nth-child(5) {
   border-bottom:2px solid #bdbdbd;
   padding-bottom:10px;
   margin-bottom:10px;
}
.marketBox li span {
    width:90px;
    float:left;
}
.marketBox li .price{
    display:block;
    text-align:left;
}
.marketBox li .count{
    display:block;
    text-align:right;
}
.marketBox .symbols p {
    text-align:center;
    width:100%;
    padding:5px;
    margin:0px;
    font-size:16px;
    line-height:24px;
}
.marketBox .info{

    color:#adacac;
    padding:5px 0px;
}
.marketBox .info p{
    display:block;
}
.marketBox .price0,.marketBox .price1,.marketBox .price2,.marketBox .price3,.marketBox .price4{
    color:#ef5555;
}
.marketBox .price5,.marketBox .price6,.marketBox .price7,.marketBox .price8,.marketBox .price9{
    color:#03c087;
}
</style>
